<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function myFocus() {
            var input1 = document.getElementById("input1")
            // alert("请输入")

            console.log("请输入:..")
        }


        function textChange() {
            var textarea = document.getElementsByTagName("textarea")[0]
            // console.log(textarea.value)

            var length = textarea.value.length


            var div1 = document.getElementById("label")
            div1.innerText = "还剩余" + (500 - length) + "字可以输入"


        }



    </script>

</head>
<body>

用户名<input id="input1" type="text" name="username" onfocus="myFocus()" onblur="myBlur()"> <br>
密码  <input id="input2"　type="text" name="password"  onfocus="myFocus()" onblur="myBlur()"> <br>


<!--　用于提示还剩余多少字符可以输入 -->
<textarea cols="50" rows="10" oninput="textChange()">

</textarea>
<div id="label"></div>

</body>
</html>

<!--
练习1：2个input输入框，
   聚焦的时候提示信息，失焦的时候验证
   onfocus(),onblur()
  练习2：img图像，鼠标放上图1，鼠标移开图2
  练习3：对于textarea，文本域：提示可以输入100个字符。剩余多少可以输入.onkeyup()
-->